<template>
	<view>
		<!-- 导航栏 -->
		<cu-custom bgColor="bg-white" class="nav-bar" :isBack="false">
			<block slot="content">交易中心</block>
		</cu-custom>
		<view class="qiun-columns">
			<view class="qiun-charts">
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts"></canvas>
			</view>
		</view>
		<view class="cu-bar search bg-white-blue nav-bar">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input :adjust-position="false"
				type="text" placeholder="请输入对方帐号" confirm-type="search"></input>
			</view>
			<view class="action nav-right" data-target="bottomModal" @tap="search" style="width: 20%;">
				<text>点击搜索</text>
			</view>
		</view>
		<view class="meVisitor bg-green-white">
			<view class="meVisitorLt">
				<navigator>
					<view class="meVisitorTxt_02">100元</view>
					<view class="meVisitorTxt_01">余额</view>
				</navigator>
			</view>
			<view class="meVisitorLt">
				<navigator>
					<view class="meVisitorTxt_02">1</view>
					<view class="meVisitorTxt_01">职位数</view>
				</navigator>
			</view>
			<view class="meVisitorLt">
				<navigator>
					<view class="meVisitorTxt_02">1</view>
					<view class="meVisitorTxt_01">报名单</view>
				</navigator>
			</view>
		</view>
		<button @tap="show">发布求购</button>
		<view class="cu-list menu-avatar">
			
			<view class="cu-item" v-for="(item,index) in 30" :key="index">
				<view class="cu-avatar round lg">
					<image class="cu-avatar lg round" src="../../static/img/home-icon.png"></image>
				</view>
				<view class="content">
					<view class="text-grey">
						<view class="text-cut" style="color: black;">昵称{{index}}</view>
						<view class="platform-cut">
							<image class="cu-platform round sm" src="../../static/img/zhifubao.png" mode=""></image>
						</view>
						
					</view>
					<view class="text-gray text-sm flex">
						<view class="action">
							<view class="text-red text-lg">单价: 1￥ </view>
							<!-- <view class="text-grey text-sm"></view> -->
						</view>
						<view class="action">
							<view class="text-red text-lg">数量: 2 </view>
							<!-- <view class="text-grey text-sm"></view> -->
						</view>
					</view>
					
				</view>
				<!-- <view class="action"> -->
					<view class="text-gray text-sm flex" style="margin-right:15px" @click="sell">
						<view class="text-cut">
							<view class="cu-tag cu-cate bg-green-two">出售</view>
						</view>
					</view>
				<!-- </view> -->
			</view>
			
		</view>
		<popup-layer ref="popupRef" :direction="'top'" v-model="boolShow"></popup-layer>
		<pay  :show="payShow" @close='payCloseFunc'></pay>
	</view>
</template>

<script>
	import uCharts from '../../components/u-charts/u-charts.js';
	import popupLayer from '../../components/popup-layer.vue';
	import pay from '../../components/payPassword/pay_Password.vue'
	var _self;
	var canvaLineA = null;
	export default {
		data() {
			return {
				payShow:false,
				boolShow:false,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
				series: [{
					name: '价格',
					data: [5.73, 6.2, 6.27, 6.34, 6.41, 6.48],
					color: '#2fc25b',
					enableMarkLine:false,
				}],
			}
		},
		components: {
			popupLayer,
			pay
		},
		onShow(){
			_self = this;
			let LineA = {
				categories: [],
				series: []
			};
			_self.cWidth = uni.upx2px(750);
			_self.cHeight = uni.upx2px(500);
			LineA.categories = _self.categories;
			LineA.series = _self.series;
			_self.showLineA("canvasLineA", LineA)
		},
		methods: {
			show(){
				console.log(123);
				this.$refs.popupRef.show(); // 或者 boolShow = rue
			},
			/**
			 * 初始化图表
			 * @param {Object} canvasId 图表id
			 * @param {Object} chartData 图表 数据
			 */
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					legend: {
						show: true
					},
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 0
					},
					// max 最大 180 
					// splitNumber 就是 Y轴显示多少格   180 / splitNumber 
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 0,
						splitNumber: 5,
						min: 0,
						max: 30,
						// format: (val) => {
						// 	return val.toFixed(0) + '元'
						// }
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});
			},
			sell(){
				this.payShow=true
			},
			payCloseFunc(){
				this.payShow = false
			},
			search(){}
		}
	}
</script>

<style>
.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	
	.meVisitor{ display: flex;flex-direction: row;}
	.meVisitorLt{ width: 50%;text-align: center;margin: 30upx 0;  border-left:1px solid #000;}
	.meVisitorLt:nth-child(1){ border-left:0}
	.meVisitorTxt_01{ font-size: 14px;color: #000; line-height: 20px;}
	.meVisitorTxt_01 image{ width: 35upx;height: 35upx;vertical-align: middle;margin: 0 10upx 4upx 0; }
	.meVisitorTxt_02{ font-size: 18px;color: #000; line-height: 32px;}
	.meVisitorTitle{ font-size: 30upx;color: #333333;border-bottom: 1px #F5F5F5 solid;padding: 20upx 30upx; }
	
	.cu-list{
		z-index: 1000000;
	}
	.cu-list.menu-avatar>.cu-item{
		height: 160upx; 
	}
	.platform-cut{
		margin-left: 20upx;
	}
	.cu-platform{
		width: 30upx;
		height: 30upx;
		margin-left: 10upx;
	}
	.cu-cate{
		font-size: 24upx;
		height: auto;
		line-height: 32px;
		width: 55px;
		border-radius: 3px;
	}
	.margin-top-footer{
		height: 40upx;
	}
	.cu-bar .search-form{
		padding-right: 0upx !important;
		padding-left: 30upx !important;
	}
	.scroll{
		/* #ifdef H5 */
		margin-top: 86upx;
		/* #endif */
		/* #ifdef APP-PLUS */
		margin-top: 146upx;
		/* #endif */
	}
	.text-sm{
		margin-top: 0px !important;
	}
	.action{
		width: 50% !important;
	}
	.nav-right{
		width: 30% !important;
	}
	.cu-modal{
		z-index: 999999999;
		/* #ifdef H5 */
		top:50px;
		/* #endif */
		/* #ifdef APP-PLUS */
		top:77px;
		/* #endif */
	}
	
</style>
